<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery/jquery-3.3.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="" class="control-label">这是一个输入框:</label>
        <input type="text" class="form-control input-sm" placeholder="这是一个输入框" />
    </div>
    <div class="form-group has-info">
        <label class="control-label" for="">这是一个下拉框:</label>
        <select name="" class="form-control">
            <option value="">北京</option>
            <option value="">上海</option>
            <option value="">广州</option>
            <option value="">深圳</option>
        </select>
    </div>
    <div class="form-group has-error">
        <label for="" class="control-label">这是一个输入框:</label>
        <textarea class="form-control" cols="30" rows="10"></textarea>
    </div>
</form>

<!--
给lable一个样式
<label for="" class="control-label">这是一个输入框:</label>

给input一个样式
<input type="text" class="form-control" placeholder="这是一个输入框" />

组件：form-group，相当于这个lable和input构成了一个小组件，给这个div设置属性，会同时影响到label和input
<div class="form-group">
    <label for="" class="control-label">这是一个输入框:</label>
    <input type="text" class="form-control" placeholder="这是一个输入框" />
</div>

这整个div  display:inline 显示。 其中的form-group control-label form-control 都会受到影响
<div class="form-inline">
    <div class="form-group">
        <label for="" class="control-label">这是一个输入框:</label>
        <input type="text" class="form-control" placeholder="这是一个输入框" />
    </div>
<div>

-->
<div class="form-inline">
    <div class="form-group has-success">
        <label for="" class="control-label">这是一个输入框:</label>
        <input type="text" class="form-control" placeholder="这是一个输入框" />
    </div>
    <div class="form-group ">
        <label for="" class="">这是一个输入框:</label>
        <input type="text" class="form-control" placeholder="这是一个输入框" />
    </div>
</div>


<!--按钮-->
<button class="btn">这是一个按钮</button>
<!--按钮的颜色-->
<button class="btn btn-default">这是一个按钮</button>
<button class="btn btn-primary">这是一个按钮</button>
<button class="btn btn-info ">这是一个按钮</button>
<button class="btn btn-warning">这是一个按钮</button>
<button class="btn btn-danger">这是一个按钮</button>
<button class="btn btn-link">这是一个按钮</button>
<!--控制按钮大小-->
<button class="btn btn-default btn-lg ">这是一个按钮</button>
<button class="btn btn-success btn-sm">这是一个按钮</button>
<!--控制按钮的选中与禁用-->
<button class="btn btn-primary active">这是一个按钮</button>
<button class="btn btn-danger" disabled="disabled">这是一个按钮</button>
<!--控制按钮的全屏-->
<button class="btn btn-danger btn-block">这是一个按钮</button>


<!--a标签所写的按钮-->
<a class="btn btn-danger" href="">这是a标签所写的按钮效果</a>
</body>
</html>